<template>
  <el-row class="news-warp">
    <el-col :span="8" tag="div" class="img-radius" style="overflow: hidden">
    <swiper 
    class="swiperWrap" 
    :direction="'vertical'"
    :slides-per-view="1" 
    :space-between="0" 
    :autoplay="{autoplay:false, delay:1000, pauseOnMouseEnter:true }"
    :loop="true"
    @swiper="onSwiper" 
    @slideChangeTransitionStart="onSlideChangeTransitionStart"
    >
    <swiper-slide v-for="(item, index) in news" :key="index" @click="newsDetail(item.infoId)">
         <el-image class="news-img" :src="item.thumb" ></el-image>
    </swiper-slide>

    </swiper>
    </el-col>
    <el-col :span="15" :offset="1">
        <swiper
          class="news-content swiperWrap" 
          :direction="'vertical'"
          :slides-per-view="4" 
          :space-between="10" 
          :loop="true" 
          @swiper="onContentSwiper" 
        >
          <swiper-slide     
              v-for="(item, index) in news"
              :key="index"
              :id="item.infoId"
              @click="newsDetail(item.infoId)">
                <el-row type="flex" justify="space-between" :id="item.infoId">
                  <el-col :span="18" class="text-ellipsis-single"
                    ><a class="edu-title">{{ item.title }}</a></el-col
                  >
                  <el-col :span="3" class="edu-time">{{ this.thisFormatDate(item.infoDate) }}</el-col>
                  <p :id="item.infoId" class="text-ellipsis-single news-text">
                    {{ item.briefDescribe }}
                  </p>
                </el-row>

          </swiper-slide>
        </swiper>
    </el-col>
  </el-row>
</template>
<script lang="ts">

import SwiperCore , { Navigation, Autoplay, Virtual, Pagination, A11y } from "swiper";
import {Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";

import router from "/@/router";

import {formatDate} from '/@/utils/tools';

SwiperCore.use([ Navigation, Virtual, Autoplay, Pagination, A11y ]);

export default {
  name: "News",
  props: {
    news: {},
  },
  data() {
    return {
      newSwiper: Object,
      newsContentSwiper: Object,
    };
  },
  components:{
    Swiper,
    SwiperSlide,
  },
  mounted() {
    //this.init();
    let self = this;
    this.newSwiper.el.onMouseOn = () => {
      //console.log("000");
      this.newSwiper.autoplay.stop();
      //this.newsContentSwiper.autoplay.stop();
    };
    this.newSwiper.el.onmouseout = () => {
      // console.log("000000");
      this.newSwiper.autoplay.start();
      //this.newsContentSwiper.autoplay.start();
    };
    // console.log(this.newSwiper.el.onMouseOn);
    this.newsContentSwiper.el.onMouseOn = () => {
      // console.log("111");
      this.newSwiper.autoplay.stop();
      //this.newsContentSwiper.autoplay.stop();
    };
    this.newsContentSwiper.el.onmouseout = () => { 
      this.newSwiper.autoplay.start();
      //this.newsContentSwiper.autoplay.start();
    };
    // console.log( this.newsContentSwiper.el.onMouseOn);
  },

  methods: {

    onSwiper(swiper){
      this.newSwiper = swiper;
      //console.log("onSwiper");
      // swiper.el.onMouseOn = () =>{
      //   swiper.autoplay.stop();
      // };
      // swiper.el.onmouseout = () =>{
      //   swiper.autoplay.start();
      // }
    },
    onSlideChangeTransitionStart(swiper){
      this.newsContentSwiper.slideNext();//.slideToLoop(swiper.realIndex);
      //console.log("onSlideChangeTransitionStart");
    },
    onContentSwiper(swiper){
      let self = this;
      this.newsContentSwiper = swiper;
      // swiper.el.onMouseOver = () =>{
      //   console.log("111");
      //   self.newSwiper.autoplay.stop();
      // };
      // swiper.el.onmouseout = () =>{
      //   self.newSwiper.autoplay.start();
      // }
    },
    thisFormatDate(date: Date){
      return formatDate(date);
    },
    newsDetail: function (id) {
      router.push({ name: "newsDetail", query: { infoId: id } });
      //this.$router.push({ name: "newsDetail", query: { infoId: id } });
    },
  },
};
</script>
<style lang="scss" scoped>

.edu-title{
  font-size:20px;
  color: #333333;
  &:hover{
    color: var(--el-color-primary); // 这里只能使用编译好的sass $colors.primary不能用了
    cursor:pointer;
  };
  &:focus{
    color: var(--el-color-primary);
    cursor:pointer;
  };
}
.news-img {
  width: 100%;
  height: 330px;
}
.news-warp {
  height: 330px;
}
.el-col {
  height: 100%;
  display:flex;
  text-align:center;
}

.news-text {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  margin-top: 10px;
  color: #666666;
}
.news-time {
  font-size: 14px;
  color: #666666;
}
.swiper,
.news-content {
  overflow: hidden;
  position: relative;
  height: 330px;
  border-radius : 3px;
}

</style>
